use crate::components::MenuButton;
use crate::styles::StyleItem;

use stylist::yew::styled_component;

use yew::{classes, html, use_state, Callback, Html, Properties};

#[derive(PartialEq, Clone)]
pub struct DropdownItem {
    pub key: StyleItem,
    pub title: String,
}

#[derive(Properties, PartialEq)]
pub struct DropdownListProps {
    pub text: String,
    #[prop_or_default]
    pub key_list: Vec<DropdownItem>,
    #[prop_or_default]
    pub select_key: Callback<usize>,
}

#[styled_component]
pub fn DropdownList(props: &DropdownListProps) -> Html {
    let DropdownListProps {
        text,
        key_list,
        select_key,
    } = props;

    let show_menu = use_state(|| false);

    {
        let _text = text.clone();
        let key_list = key_list.clone();
        let select_key = select_key.clone();

        let onclick = {
            let show_menu = show_menu.clone();
            let result = *show_menu;
            Callback::from(move |_| {
                show_menu.set(!result);
            })
        };

        let onclickitem = {
            let show_menu = show_menu.clone();
            move |index, x| {
                let DropdownItem { title, key } = x;
                let title = title.clone();
                let select_key = select_key.clone();
                html! {
                    <li onclick={move |_|{
                        show_menu.set(false);
                        select_key.emit(index);
                    }}
                        style={key.build_style()}
                    >{title}</li>
                }
            }
        };

        let show_menu = show_menu.clone();

        html! {
            <div class={classes!("pos-relative", css!(r#"
                "#))}>
                    <MenuButton text={props.text.clone()} {onclick} />
                    <div class={classes!("pos-abs", css!(r#"
                        box-shadow:0px 2px 4px rgba(0, 0, 0, 0.3);
                       left: 0;
                       background-color: white;
                        list-style-type: none;
                        margin: 0;
                        padding: 0;

                        ul {
                          margin: 0 0;
                          padding: 5px 5px;
                        }

                        li {
                          display: inline-block;
                          padding: 5px 5px;
                          border-bottom: 1px solid gray;
                          text-wrap: nowrap;
                        }
                        li:last-child {
                          display: inline-block;
                          padding: 5px 5px;
                          border-bottom: none;
                        }
                        li:hover {
                          cursor: pointer;
                          background-color: gray;
                          color: white;
                        }
                        "#))}>
                    { if *(show_menu.clone()) {
                       html!{
                          <ul class={classes!("column")}>
                          {
                              key_list.into_iter().enumerate()
                                  .map(|(index,x)|onclickitem.clone()(index,x))
                              .collect::<Html>()
                          }
                          </ul>
                           }
                        } else {
                            html!{}
                        }
                    }
                    </div>
            </div>

        }
    }
}
